{% extends 'common/base.html' %}
{% import 'common/page.html' as pg %}
{% block css %}
{% endblock %}
{% block content %}
    <section class="content-header">
        <div>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 用户管理</a></li>
                <li class="active">好友列表</li>
            </ol>
        </div>
    </section>
    <section class="content" id="showcontent">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">好友列表</h3>
                        <div class="box-tools">
                            <a type="button" class="btn btn-primary float-right" data-toggle="modal"
                               data-target="#add" style="padding: 4px 6px">添加</a>
                            <div class="float-right" style="margin-right:5px;width: 200px">
                                <form action="" method="GET">
                                    <div class="input-group input-group-sm">
                                        <input type="text" class="form-control" name="keyword"
                                               placeholder="请输入昵称或邮箱或手机号" value="{{ keyword }}">
                                        <span class="input-group-btn">
                                             <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <th>编号</th>
                                <th>头像</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>操作事项</th>
                            </tr>
                            {% for v in page_data.items %}
                                <tr>
                                    <td>{{ v.friend.id }}</td>
                                    <td><img style="width: 50px;height: 50px;"
                                             src="{{ url_for('static', filename='uploads/users/') }}{{ v.friend.face }}"
                                             class="img-responsive center-block" alt=""></td>
                                    <td>{{ v.friend.username }}</td>
                                    <td>{{ v.friend.email }}</td>
                                    <td>
                                        <a href="{{ url_for('main.friend_del', self_id=v.self_id,friend_id=v.friend_id) }}"
                                           class="label label-danger" onclick="del({{ v.friend.username }})">删除</a>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="box-footer clearfix">
                        {{ pg.page(page_data,'main.friend_list',keyword) }}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal -->
    <div class="modal" id="add" tabindex="-1" role="dialog" data-backdrop="false"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="renew()"><span
                            aria-hidden="true">&times;</span></button>
                    <p>查询用户</p>
                    <form method="GET">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" name="info" id="info"
                                   placeholder="请输入昵称或邮箱或手机号">
                            <span class="input-group-btn">
                            <a class="btn btn-default" onclick="findUser()"><i class="fa fa-search"></i></a>
                        </span>
                        </div>
                    </form>
                </div>
                <div class="modal-body">
                    <ul id="userList">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
{% endblock %}

{% block js %}
    <script>
        $(function () {
            var msg_ok = {{get_flashed_messages(category_filter=["ok"])|tojson}};
            if (msg_ok.length > 0 && msg_ok != "") {
                layer.open({
                    title: '成功',
                    content: msg_ok.toString(),
                    icon: 1,
                    times: 2000
                });
            }
            var msg_err = {{get_flashed_messages(category_filter=["err"])|tojson}};
            if (msg_err.length > 0 && msg_err != "") {
                layer.open({
                    title: '失败',
                    content: msg_err.toString(),
                    icon: 2,
                    times: 2000
                });
            }
        })

        function del(name) {
            return confirm("确定删除[" + name + "]?");
        }

        function findUser() {
            var info = $("#info").val();
            var str = "";
            $.post("{{ url_for('main.findUser')}}", {"info": info}, function (res) {
                if (res != "err") {
                    for (var i = 0; i < res.length; i++) {
                        str += "<li><div id=\"left\">" +
                            "<img src=\"{{ url_for('static', filename='uploads/users/') }}" + res[i][4] + "\" class=\"img-circle photo\"></td>" +
                            "</div><div id=\"center\">" + res[i][1] + "(" + res[i][3] + ")<p><span>邮箱：" + res[i][2] + "</span></p></div><div id=\"right\">" +
                            "<a class=\"label label-success float-right height\" onclick=\"friend_add(" + res[i][0] + ")\">加为好友</a></div></li>";
                        if (i != res.length - 1 && i != res.length) {
                            str += "<hr/>";
                        }
                    }
                    $("#userList").html(str);
                } else {
                    $("#userList").html("抱歉，查询不到该用户！");
                }

            })
        }

        function friend_add(id) {
            $.post("{{ url_for('main.friend_add')}}", {"id": id}, function (res) {
                if (res == "ok") {
                    toastr.success('添加好友成功');
                }else {
                     toastr.info('你们已经是好友了');
                }
            })
        }

        function renew() {
            location.href = "{{ url_for('main.friend_list')}}";
        }

    </script>
{% endblock %}